// Button Group 按钮组

.btn-group {
    &.btn-pill {
        border-radius: 2rem;
        overflow: hidden;

        @each $name, $color in $e-state-colors {
            .btn-#{$name} {
                @if $name == 'metal' {
                    color: e-get($color, base);
                    background-color: e-get($color, inverse);
                    border-color: e-get($color, inverse);
                }
                border-width: 1px;
                border-style: solid;

                .show > &,
                &.active,
                &:active,
                &:hover {
                    @if $name == 'metal' {
                        color: e-get($color, inverse);
                        background-color: e-get($color, base);
                        border-color: e-get($color, base);
                    }
                }
            }
        }
    }

    &.btn-elevated {
        box-shadow: $btn-elevate-shadow-1;
    }

    @include e-mobile {
        &.btn-pill {
            border-radius: 0;

            .nav {
                justify-content: center;
            }

            .btn {
                margin-bottom: .5rem;
                border-radius: 2rem;
            }
        }
    }
}